
<template>
    <div>
        <el-table :data="tableData" style="width: 100%" row-key="path">
            <el-table-column prop="title" label="权限名称" width="180" />

            <el-table-column label="图标" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-icon size="20px">
                            <component :is="mapIcon[scope.row.icon]" />
                        </el-icon>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-button type="primary" round @click="handleUpdata(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                            @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button type="danger" round>删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>

        </el-table>

        <el-dialog v-model="dialogVisible" title="更新权限">
            <el-form :model="updataForm" status-icon>
                <el-form-item label="权限名称" prop="title">
                    <el-input v-model="updataForm.title" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleConfirm()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<script  setup>
import { onMounted, ref, reactive } from 'vue'
import axios from 'axios'
import { TrendCharts, User, List, Key, Grid, OfficeBuilding, PieChart, School } from '@element-plus/icons-vue'
// 映射  后端返回的是字符串，需要映射成组件
const mapIcon = { TrendCharts, User, List, Key, Grid, OfficeBuilding, PieChart, School }
const tableData = ref()
// 更新表单权限
const updataForm = reactive([])
// 保存当前要更新的的数据
const currentItem = ref({})

// 弹窗
const dialogVisible = ref(false)
const handleUpdata = (row) => {
    dialogVisible.value = true
    updataForm.title = row.title
    currentItem.value = row
    console.log(currentItem.value)

}

// 确认按钮
const handleConfirm = async () => {
    // currentItem.value.title = updataForm.title
    dialogVisible.value = false
    console.log(currentItem.value.title)
    await axios.put(`/adminapi/rights`, {
        data: currentItem.value,
        title: updataForm.title
    })
    await getList() // 更新列表
}
// 删除
const handleDelete = async (row) => {
    console.log(row)
    await axios.delete(`/adminapi/rights`, {
        data: row
    })
    await getList()
}


onMounted(() => {
    getList()
})

const getList = async () => {
    let res = await axios.get("/adminapi/rights")
    tableData.value = res.data
}

</script>